/* eslint-disable react/jsx-no-bind */
import { PauseActionOptions, StopActionOptions, WithPause } from '@slardar/integrations'
import { BrowserCommandClient } from '@slardar/web'

function pauseAction(options?: Partial<PauseActionOptions>) {
  const client = window.SdkClient as WithPause<BrowserCommandClient>
  client.pause?.pauseAction(options)
}

function stopAction(options?: Partial<StopActionOptions>) {
  const client = window.SdkClient as WithPause<BrowserCommandClient>
  client.pause?.stopAction(options)
}

function startAction() {
  const client = window.SdkClient as WithPause<BrowserCommandClient>
  client.pause?.startAction()
}

function pauseActionIsResumeFalse() {
  pauseAction({ capacity: 2, isResume: false })
}

function pauseActionIsResumeTrue() {
  pauseAction({ capacity: 2, isResume: true })
}

function stopActionIsReportAllTrue() {
  stopAction({ isReportAll: true })
}

function stopActionIsReportAllFalse() {
  stopAction({ isReportAll: false })
}

function report(name: string) {
  window.SdkClient.report({
    ev_type: 'custom',
    payload: {
      type: 'event',
      name,
    },
  })
}

function send(name: string) {
  window.SdkClient.getSender()?.send({
    ev_type: 'custom',
    payload: {
      type: 'event',
      name,
    },
    common: {},
  })
}

function setWait(wait: number) {
  window.SdkClient.getSender()?.setWait(wait)
}

function setSizeInfinity() {
  window.SdkClient.getSender()?.setSize(Infinity)
}

export const Pause = () => {
  return (
    <>
      <button id="pause-pauseAction-isResume-True" onClick={pauseActionIsResumeTrue}>
        pause-pauseAction-1
      </button>
      <button id="pause-pauseAction-isResume-False" onClick={pauseActionIsResumeFalse}>
        pause-pauseAction-2
      </button>
      <button id="pause-startAction" onClick={startAction}>
        pause-startAction
      </button>
      <button id="pause-stopAction-isReportAll-True" onClick={stopActionIsReportAllTrue}>
        pause-StopAction-1
      </button>
      <button id="pause-stopAction-isReportAll-False" onClick={stopActionIsReportAllFalse}>
        pause-StopAction-2
      </button>
      <button id="pause-report-name1" onClick={() => report('1')}>
        pause-report-name1
      </button>
      <button id="pause-report-name2" onClick={() => report('2')}>
        pause-report-name2
      </button>
      <button id="pause-report-name3" onClick={() => report('3')}>
        pause-report-name3
      </button>
      <button id="pause-send-name4" onClick={() => send('4')}>
        pause-send-name4
      </button>
      <button id="pause-send-name5" onClick={() => send('5')}>
        pause-send-name5
      </button>
      <button id="pause-send-name6" onClick={() => send('6')}>
        pause-send-name6
      </button>
      <button id="pause-setWait1000" onClick={() => setWait(1000)}>
        pause-setWait1000
      </button>
      <button id="pause-setSizeInfinity" onClick={setSizeInfinity}>
        pause-setSizeInfinity
      </button>
    </>
  )
}
